<template>
	<view class="app">
		<load :ready="ready"></load>
		<u-form :model="form" label-position="top"  ref="uForm">
			<view class="title">签约人信息</view>
			<u-form-item label="姓名" :required="true"><u-input v-model="form.name" placeholder="请输入" /></u-form-item>
			<u-form-item label="身份证号" :required="true"><u-input v-model="form.intro" placeholder="请输入" /></u-form-item>
			<u-form-item label="手机号码" :required="true"><u-input v-model="form.intro" placeholder="请输入" /></u-form-item>
			<u-form-item label="用气地址" :required="true"><u-input v-model="form.intro" placeholder="请输入" /></u-form-item>
			<u-gap height="20"></u-gap>
			<view class="title">签约说明</view>
			<u-gap height="10"></u-gap>
			<view class="text">*以上信息用于签署个人《瓶装液化石油气供应电子协议》，请准确填写并核对，填写的姓名和身份证号信息，需为该手机号码的开户人。</view>
			<view class="btnbox">
				<u-button type="primary" shape="circle" :custom-style="btnStyle">提交</u-button>
			</view>
		</u-form>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	import titleMain from '@/components/base/title';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {
			titleMain
		},
		data() {
			return {
				navbar: {},
				ready: true,
				form: {
					type:'',
					lift:-1,
					order: -1,
				},
				btnStyle: this.$config.btnStyle,
				verCode: {
					text: '获取验证码',
					code: '',
					isDownIng: false,
					i: 60,
					t: null,
				},
				background: {
					backgroundColor: '#f7f7f7'
				},
				lineStyle: {
					right: '20rpx',
					bottom: '4px'
				},
				liftList: [{
						name: '有电梯',
						value: 1,
						disabled: false
					},
					{
						name: '没电梯',
						value: 0,
						disabled: false
					}
				],
				isOrder: [{
						name: '有',
						value: 1,
						disabled: false
					},
					{
						name: '没有',
						value: 0,
						disabled: false
					}
				],
				radio: '',
				switchVal: false,
				typeList: [{
						name: '商户',
						value: 1,
						disabled: false
					},
					{
						name: '家庭用户',
						value: 2,
						disabled: false
					}
				],
				addRes:{},
				rules: {
					// 字段名称
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			};
		},
		onLoad() {
			that = this;
		},
		onShow() {
			// #ifdef H5
			this.$common.h5SetTitle('');
			// #endif
		},
		onUnload() {
			that = null
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			//打开地图
			async openMap() {
				console.log('openMap----');
			    const res = await this.$common.openMap();
				console.log('openMap');
			    console.log(res);
			    if (res) {
			        let addRes = await this.$user.getAddCode({
			            lat: res.latitude,
			            lng: res.longitude
			        });
			        let data = Object.assign(
			            {
			                lat: res.latitude,
			                lng: res.longitude
			            },
			            addRes.ad_info,
			            {
			                address: addRes.address
			            }
			        );
					this.addRes = data;
			        // const { lng, lat } = this.$common.qqMapTransBMap(data.lng, data.lat);
			        // data.bdlng = lng;
			        // data.bdlat = lat;
			        // this.setUserLocation(data);
			        // if (that.STATE == 1) return;
			        // this.getInit();
			    }
			},
			async getCode() {
				if (this.verCode.isDownIng) return
				this.downDate();
			},
			async getInit() {
				if (!this.rules.length) {
					const signTipsRes = await that.$api.signTips();
					if (signTipsRes.data.status == that.$config.RESOK) {
						this.rules = this.$common.normalRichText(signTipsRes.data.data.rules);
					}
				}
				if (this.verCode.isDownIng) return
				const res = await this.$api.sendRegCode({
					mobile: this.bindMobile,
				});
				if (res.data.status == this.$config.RESOK) {
					this.$common.showTip(res.data.msg, 'none');
					this.downDate();
				} else {
					this.$common.showTip(res.data.msg, 'none');
				}
			},
			downDate() {
				const slet = this;
				let i = slet.verCode.i;
				slet.verCode.t = setInterval(function() {
					slet.verCode.text = `${i}s后重发`;
					if (!slet.verCode.isDownIng) {
						slet.verCode.isDownIng = true;
					}
					i--;
					if (i == 0) {
						clearInterval(slet.verCode.t);
						slet.verCode.isDownIng = false;
						slet.verCode.text = '获取验证码';
					}
				}, 1000);
			},
			...mapActions([]),
		},
		computed: {
			getBtnStyle() {
				let style = {};
				if (this.verCode.isDownIng) {
					style = Object.assign({}, this.$config.btnStyle3, {
						height: '80rpx',
						lineHeight: '80rpx',
						fontSize: '13px',
						width: '30%'
					})
				} else {
					style = Object.assign({}, this.$config.btnStyle2, {
						height: '80rpx',
						lineHeight: '80rpx',
						fontSize: '13px',
						width: '30%'
					})
				}
				return style;
			},
			...mapState({
				userInfo: 'userInfo',
			})
		},

	};
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/login.scss';

	.app {
		padding: 30rpx;
	}

	.btnbox {
		padding: 30rpx 0;
	}
	.title{
		font-size: 18px;
		font-weight: bold;
	}
	.text{
		font-size: 13px;
		color: #666;
	}
</style>